<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/common.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description('Tests for tooShort flag with &lt;input> elements.');

var input = document.createElement('input');
document.body.appendChild(input);

debug('No minlength and no value');
shouldBeFalse('input.validity.tooShort');

debug('');
debug('Non-dirty value');
input.setAttribute('value', 'ab');
input.minLength = 3;
shouldBe('input.value.length', '2');
shouldBeFalse('input.validity.tooShort');

input.setAttribute('value', 'a');
shouldBe('input.value.length', '1');
shouldBeFalse('input.validity.tooShort');

debug('');
debug('Dirty value and longer than minLength');
input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', 'ab');
input.minLength = 3;
input.focus();
input.setSelectionRange(2, 2);  // Move the cursor at the end.
eventSender.keyDown('Backspace');
shouldBe('input.value.length', '1');
shouldBeTrue('input.validity.tooShort');
// Make the value empty, which means valid.
eventSender.keyDown('Backspace');
shouldBe('input.value.length', '0');
shouldBeFalse('input.validity.tooShort');
sendString('ab');
shouldBe('input.value.length', '2');
shouldBeTrue('input.validity.tooShort');
// Make the value >=minLength.
sendString('c');
shouldBe('input.value.length', '3');
shouldBeFalse('input.validity.tooShort');

debug('');
debug('Sets a value via DOM property');
input.minLength = 3;
input.value = 'ab';
shouldBeFalse('input.validity.tooShort');

debug('');
debug('Disabling makes the control valid');
input.focus();
input.setSelectionRange(2, 2);
eventSender.keyDown('Backspace');
shouldBeTrue('input.validity.tooShort');
shouldBeTrue('input.disabled = true; input.validity.tooShort');
shouldBeTrue('input.disabled = false; input.validity.tooShort');

debug('');
debug('Change the type with a too long value');
input.minLength = 3;
input.value = 'a';
input.type = 'search';
input.focus();
input.setSelectionRange(1, 1);
sendString('b');
shouldBeTrue('input.validity.tooShort');
shouldBeFalse('input.type = "number"; input.validity.tooShort');

debug('');
debug('Grapheme length is shorter than minLength though character length is greater');
// fancyX should be treated as 1 grapheme.
// U+0305 COMBINING OVERLINE
// U+0332 COMBINING LOW LINE
var fancyX = 'x\u0305\u0332';
input = document.createElement('input');
document.body.appendChild(input);
input.value = fancyX + 'A'; // 4 characters, 2 grapheme cluster.
input.minLength = 2;
input.focus();
shouldBeFalse('input.validity.tooShort');
eventSender.keyDown('Backspace'); // Make the value dirty, 1 grapheme remains.
// Not too short because there are three characters.
shouldBe('input.value.length', '3');
shouldBeFalse('input.validity.tooShort');
input.remove();
</script>
</body>
</html>
